<html>
    <head>
        {% block title %}
        <title>爬虫任务</title>
        {% endblock %}
        <meta charset="utf8">
        <script src="/static/js/jquery-3.3.1.min.js"></script>
        <style>
            /* base */
            body {
                margin-left: 0%;
                margin-right: 0%;
                padding:0px;
                font-family: sans-serif;
            }
            header, footer{
                background-color: #4876a3;
            }
            header {
                height: 100px;
                text-align:center;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: column;
                margin-bottom: 0;
            }
            #content {
                position:relative; 
                padding-bottom: 50px; 
              }
            /* footer {
                height:80px;
                clear:both;
                margin-top:-80px;
                margin-bottom:-80px;
            } */
            footer {
                height:80px;
                clear:both;
                margin-top:-80px;
                margin-bottom:-80px;
                position:absolute;
				left:0px;
				width: 100%;
			    bottom:0px;
            }

            #nav > ul {
                background-color: #4e9be9;
                list-style-type:none;
                margin-top: 0;
                padding: 0;
                overflow:hidden;
                margin-bottom: 0;
            }
            #nav > ul > li {
                float:left;
            }
            #nav > ul > li > a:link,  #nav > ul > li > a:visited {
                display:block;
                width:120px;
                font-weight:bold;
                color:rgb(240, 240, 248);
                text-align:center;
                padding:4px;
                text-decoration:none;
                text-transform:uppercase;
            }
            #nav > ul > li > a:hover, #nav > ul > li > a:active {
                background-color: #cc0000;
            }
            /* content */
            {% block css %}
            {% endblock %}

        </style>
    </head>
<body>
    <header>
        <h1>scrapyd 爬虫任务</h1>
    </header>
    <div id="nav">
        <ul>
            <li><a href="{% url 'home' %}">Home</a></li>
            <li><a href="{% url 'spiders' %}">Spiders</a></li>
            <li><a href="{% url 'tasks' %}">Task</a></li>
        </ul>    
    </div>

    <div id="content">
        {% block content %}
        {% endblock %}
    </div>
    <footer></footer>
</body>
</html>
